<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="div_id">
    <div  v-if="books.length>0">
        <table border="1">
            <thead>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
            </thead>
            <tbody>
            <tr v-for="(book,index) in books">
                <td>{{index+1}}</td>
                <td>{{book.name}}</td>
                <td>{{book.date}}</td>
                <td>{{book.price | showPrice1}}</td>
                <!--通过disabled控制按钮是否可以点击-->
                <td><button v-on:click="dec(index)" v-bind:disabled="book.num<=1">-</button>
                    {{book.num}}<button v-on:click="add(index)">+</button></td>
                <td><button v-on:click="remove(index)">移除</button></td>
            </tr>
            </tbody>
        </table>
        <span>总价格：{{getTotalPrice()}}</span>
    </div>

    <span v-else>没有图书</span>
</div>


<script src="../../../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>